<template>
  <div>
    <a :href="'https://'+ pc.ip" target="_blank" class="btn btn-info btn-block" v-for="pc in pcs" v-text="pc.name"> </a>
    <a :href="'https://'+ vdi.ip" target="_blank" class="btn btn-primary btn-block" v-for="vdi in vdis"
       v-text="vdi.name"></a>
  </div>
</template>

<script>

  let checkOnline = '/online'
  let usersUrl = '/api/userlist'

  export default {
    name: 'users',
    data () {
      return {
        pcs: [],
        vdis: []
      }
    },
    mounted () {
      let _this = this
      this.$http.get(usersUrl).then(response => {
        console.log(response)
        _this.pcs = response.data.pc
        _this.vdis = response.data.vdi
      }, error => {
        console.log(error)
      })
    },
    methods: {
      refresh: function () {
        let _this = this
        setInterval(function () {
          for (let i = 0; i < _this.pcs.length; i++) {
            try {
              let origin = 'https://' + _this.pcs[i].ip
              _this.$http.get(origin + checkOnline, {}, {
                headers: {'Access-Control-Allow-Origin': '*'}
              }).then(response => {
                console.log(response)
              }, error => {
                console.log(error)
              })
            } catch (e) {
              console.log('')
            }
          }
        }, 5000)
      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
